'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import ToastUtil from '../../../../core/utils/toast-util.js';
import {Loading, EasyLoading} from 'react-native-easy-loading';
import DatePicker from 'react-native-datepicker'
import CameraButton from '../../../../core/component/comp.button-camera';
import Http from '../../../../core/utils/http';

import Util from '../../../../core/utils/util';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import ImageButton from "../../../../core/component/comp.image-button";
import PhotoInfoItem from "../../../../core/component-biz/comp.photo-info-panel";
import WinPanel from "../../../../core/component/comp.win-panel";
import WinPanelRow from "../../../../core/component/comp.win-panel-row";
import PeopleInfoItem from "../../../../core/component-biz/comp.people-info-panel";
import NavBar from '../../../../core/component-biz/comp.nav-search-bar';
import Color from '../../../../core/constant/color';

class MainScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: "搜索",
        tabBarVisible: false,
        headerTintColor: "white",
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
        header: null,
    });

    constructor(props) {
        super(props);
        this.state = {
            searchText: '',
        }
    }

    componentDidMount() {

    }

    onPressSearch(searchText) {
        const {navigate} = this.props.navigation;
        this.setState({
            searchText: searchText,
        });

        //跳转到搜索列表
        navigate('MainSearchResultScene',{
            searchText:searchText,
        })
    }

    genHistorySearchListUI() {
        const historyList = [
            {name: '王者荣耀'},
            {name: 'LOL陪玩'},
        ];
        if (historyList && historyList.length > 0) {
            return (
                <View style={styles.otherSearchList}>
                    {historyList.map((item,index)=>this.genSearchListItemUI('other-search-list',item,index))}
                </View>
            );
        } else {
            return (
                <View style={styles.otherSearchList}>
                    <Text style={styles.searchEmptyTip}>无历史记录</Text>
                </View>
            );
        }
    }

    onPressCleanHistory = () => {

    }

    onPressSearchLabel(search){
        const {navigate} = this.props.navigation;
        this.setState({
            searchText:search,
        },()=>{
            navigate('MainSearchResultScene', {searchText:search});
        });
    }

    genHistorySearchUI() {
        return (
            <View style={styles.historySearchPanel}>
                <View style={styles.searchTitleView}>
                    <Text style={styles.searchTitleText}>历史搜索</Text>
                    <ImageButton style={styles.btnHistoryDel} imageStyle={styles.btnHistoryDelImage}
                                 source={require('../../../../img/icon_small_delete.png')}
                                 onPress={this.onPressCleanHistory}/>
                </View>
                {this.genHistorySearchListUI()}
            </View>
        );
    }

    genSearchListItemUI(keyPre,item,index){
        return (
            <TouchableOpacity key={`${keyPre}-${index}`} style={styles.searchLabel} onPress={this.onPressSearchLabel.bind(this,item.name)}>
                <Text style={styles.searchLabelText}>{item.name}</Text>
            </TouchableOpacity>
        );
    }

    genOtherSearchListUI() {
        const historyList = [
            {name: '王者荣耀'},
            {name: 'LOL陪玩'},
            {name: '寻觅美食'},
            {name: '购物逛街'},
            {name: '清晨叫醒'},
            {name: '客户关系'},
        ];
        if (historyList && historyList.length > 0) {
            return (
                <View style={styles.otherSearchList}>
                    {historyList.map((item,index)=>this.genSearchListItemUI('other-search-list',item,index))}
                </View>
            );
        } else {
            return (
                <View style={styles.otherSearchList}>
                    <Text style={styles.searchEmptyTip}>无历史记录</Text>
                </View>
            );
        }
    }


    genSearchFoundListUI() {
        return (
            <View style={styles.otherSearchPanel}>
                <View style={styles.searchTitleView}>
                    <Text style={styles.searchTitleText}>搜索发现</Text>
                </View>
                {this.genOtherSearchListUI()}
            </View>
        );
    }

    render() {
        const {searchText} = this.state
        return (
            <View style={styles.container}>
                <NavBar searchText={searchText} showBackButton navigation={this.props.navigation} readOnly={false}
                        onRightPress={this.onPressSearch.bind(this)}/>
                <ScrollView style={styles.scrollView}>
                    {this.genHistorySearchUI()}
                    {this.genSearchFoundListUI()}
                </ScrollView>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    scrollView: {},
    bannerView: {
        flexDirection: 'row',
        padding: 8,
    },
    bannerImage: {
        flex: 1,
        height: 200,
        // resizeMode:'contain',
        backgroundColor: 'blue',
        borderRadius: 6,
    },
    bigHeaderPanel: {},
    bigHeaderImage: {
        height: 255,
        resizeMode: 'cover',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnPassVideo: {
        backgroundColor: 'rgba(0,0,0,0.7)',
        width: 140,
        position: 'absolute',
        left: 8,
        top: 8,
        paddingLeft: 8,
        paddingRight: 8,
    },
    btnPassVideoIcon: {
        width: 22,
        height: 22,
    },
    btnPassVideoText: {
        color: '#0ABB07',
    },
    playBtn: {
        width: 65,
        height: 65,
    },
    playBtnImage: {
        width: 65,
        height: 65,
    },
    userDetailPanel: {
        backgroundColor: 'white',
    },
    userDetailTop: {
        padding: 8,
        flexDirection: 'row',
        alignItems: 'center',
        // borderWidth:1,
    },
    userNickName: {
        fontSize: 14,
    },
    userGenderGroup: {
        borderWidth: 1,
        borderColor: '#FF0055',
        height: 18,
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 4,
        paddingRight: 4,
        marginLeft: 8,

    },
    age: {
        color: '#FF0055',
        fontSize: 12,
    },
    genderIcon: {
        width: 12,
        height: 12,
    },
    rightActivePanel: {
        flex: 1,
        alignItems: 'flex-end',

    },
    btnActiveTime: {
        width: 78,
        height: 30,
        backgroundColor: '#FF0055',
    },
    btnActiveTimeText: {
        color: 'white',
    },
    splitLine: {
        height: Util.getRealPixel(1),
        backgroundColor: '#EDEDEF',
        marginLeft: 8,
    },
    userDetailBottom: {
        padding: 8,
    },
    userDetailShortDesc: {
        color: '#707070',
        fontSize: 14,
    },


    gridViewGrop: {
        justifyContent: 'space-between',
        padding: 4,
    },
    bigUserInfoPanel: {
        backgroundColor: 'white',
        marginBottom: 4,
    },
    historySearchPanel: {},
    otherSearchPanel: {},
    searchTitleView: {
        height: 30,
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: 8,
        marginTop: 8,
    },
    searchTitleText: {
        fontSize: 14,
        flex: 1,
        color: '#909090',
    },
    btnHistoryDel: {
        width: 20,
        height: 20,
        marginRight: 8,
    },
    btnHistoryDelImage: {
        width: 20,
        height: 20,
    },
    otherSearchList: {
        marginLeft: 8,
        marginRight: 8,
        flexDirection:'row',
        flexWrap:'wrap'
    },
    searchEmptyTip: {
        fontSize: 14,
        flex: 1,
        color: '#383838',
        textAlign: 'center',
    },
    searchLabel:{
        borderRadius:16,
        padding:8,
        paddingLeft:16,
        paddingRight:16,
        backgroundColor:'#F5F5F5',
        marginRight:8,
        marginBottom:8,
    },
    searchLabelText:{
        color:'#383838',
        fontSize:14,
    },
});

export default MainScene;